}

در بخش‌های مربوطه می‌توانید درباره رندر شرطی و حلقه‌ها اطلاعات بیشتری کسب کنید.

Props پیش‌فرض روی "True"

اگر هیچ مقداری برای یک prop ارسال نکنید، به طور پیش‌فرض روی true است. این دو عبارت JSX معادل هستند:

<تکمیل خودکار MyTextBox/

به طور کلی، توصیه نمی‌کنیم مقداری را برای یک prop ارسال نکنید، زیرا می‌توان آن را با مخفف شیء ES6 {foo} که مخفف {foo: foo} به جای {foo: true} است اشتباه گرفت. این رفتار فقط وجود دارد تا با رفتار HTML مطابقت داشته باشد.

6. ReactJS — اجزاء

در این فصل، نحوه ترکیب مؤلفه‌ها را برای آسان‌تر نگه‌داشتن برنامه یاد می‌گیریم. این رویکرد به شما امکان می‌دهد اجزای خود را بدون تأثیرگذاری بر بقیه صفحه به‌روزرسانی و تغییر دهید.

نمونه بدون تابعیت

اولین جزء ما در مثال زیر App است. این مؤلفه مالک سرصفحه و محتوا است. ما Header و Content را جداگانه ایجاد می کنیم و فقط آن را در درخت JSX در جزء App خود اضافه می کنیم. فقط مؤلفه برنامه باید صادر شود.

7. Props And PropTypes در React

Props و PropType مکانیسم مهمی برای انتقال اطلاعات بین اجزای React هستند و ما در اینجا قصد داریم آنها را با جزئیات بیشتر بررسی کنیم. این آموزش شما را با جزئیات مربوط به props، عبور و دسترسی به props و انتقال اطلاعات به هر جزء با استفاده از props آشنا می کند. با این حال، اعتبارسنجی داده‌هایی که از طریق props دریافت می‌کنیم با استفاده از PropType همیشه یک روش خوب است. بنابراین، شما همچنین یاد خواهید گرفت که چگونه PropTypes را در React ادغام کنید.

درک نکات

React به ما امکان می‌دهد با استفاده از چیزهایی به نام props (مخفف خواص) اطلاعات را به مؤلفه‌ها منتقل کنیم. از آنجایی که React شامل چندین مؤلفه است، props امکان به اشتراک گذاشتن داده های یکسان را در بین مؤلفه هایی که به آنها نیاز دارند، می دهد. از جریان داده های یک طرفه (مولفه های والدین به فرزند) استفاده می کند. با این حال، با یک تابع callback، می‌توانید از یک فرزند به یک مؤلفه والدین بازگردانید.

این داده‌ها می‌توانند به اشکال مختلف باشند: اعداد، رشته‌ها، آرایه‌ها، توابع، اشیاء، و غیره. به کد زیر نگاهی بیندازید:

در این قطعه، ما در حال ارسال یک پایه به نام پست ها به مؤلفه ای به نام PostList هستیم. این پایه دارای مقدار {postsList} است. بیایید نحوه دسترسی و ارسال داده ها را بررسی کنیم.

8. بهینه سازی عملکرد در برنامه های React

از زمانی که React معرفی شد، روش ساخت برنامه‌های کاربردی وب توسط توسعه‌دهندگان فرانت‌اند را تغییر داده است و DOM مجازی آن به دلیل رندر مؤثر مؤلفه‌ها مشهور است. در این آموزش، روش‌های مختلف بهینه‌سازی عملکرد در برنامه‌های React و همچنین ویژگی‌های React را که می‌توانیم برای بهبود عملکرد از آنها استفاده کنیم، بحث خواهیم کرد.

در طول فرآیند رندر اولیه، React یک درخت DOM از اجزا می‌سازد. بنابراین، وقتی داده‌ها در درخت DOM تغییر می‌کنند، می‌خواهیم React فقط مؤلفه‌هایی را که تحت تأثیر این تغییر قرار گرفته‌اند، دوباره رندر کنیم و از سایر مؤلفه‌های درخت که تحت تأثیر قرار نگرفته‌اند صرفنظر کنیم.

با این حال، React می‌تواند در نهایت همه مؤلفه‌ها را در درخت DOM دوباره رندر کند، حتی اگر همه تحت تأثیر قرار نگیرند. این منجر به زمان بارگذاری طولانی تر، اتلاف زمان و حتی هدر رفتن منابع CPU می شود. ما باید از این اتفاق جلوگیری کنیم. بنابراین، اینجا جایی است که ما تلاش های بهینه سازی خود را متمرکز خواهیم کرد.

9. در React

تاکنون، ما فقط مؤلفه‌های استاتیک را با داده‌های استاتیکی که به درخت مؤلفه‌ها منتقل می‌شد، مورد بحث قرار می‌دادیم. اغلب، برای ایجاد یک جزء حالتی که در آن حالت در طول زمان تغییر می‌کند، لازم است.

10. React Hooks

React Hooks

Hoks ویژگی جدیدی است که در نسخه React 16.8 معرفی شده است. این به شما امکان می دهد بدون نوشتن کلاس از حالت و سایر ویژگی های React استفاده کنید. هوک ها توابعی هستند که از اجزای تابع به ویژگی های React State و چرخه حیات متصل می شوند. داخل کلاس ها کار نمی کند.

قلاب ها با عقب سازگار هستند، به این معنی که هیچ تغییری در آن وجود ندارد. همچنین، جایگزین دانش شما از مفاهیم React نمی شود.

زمان استفاده از قلاب

اگر یک کامپوننت تابعی را بنویسید و سپس می‌خواهید حالتی به آن اضافه کنید، قبلاً این کار را با تبدیل آن به یک کلاس انجام می‌دهید. اما، اکنون می توانید این کار را با استفاده از یک Hook در داخل مؤلفه تابع موجود انجام دهید.

قوانین قلاب

هوک ها شبیه توابع جاوا اسکریپت هستند، اما هنگام استفاده از آنها باید این دو قانون را رعایت کنید. قانون Hooks تضمین می کند که تمام منطق حالت در یک جزء در کد منبع آن قابل مشاهده است. این قوانین عبارتند از:

فقط Hooks را در سطح بالا تماس بگیرید

Hoks را درون حلقه‌ها، شرایط یا توابع تودرتو فراخوانی نکنید. قلاب ها باید همیشه در سطح بالایی از توابع React استفاده شوند. این قانون تضمین می کند که هر بار که یک مؤلفه رندر می شود، Hook ها به همان ترتیب فراخوانی می شوند.

فقط Hooks را از توابع React فراخوانی کنید

شما نمی توانید Hooks را از توابع معمولی جاوا اسکریپت فراخوانی کنید. در عوض، می‌توانید Hooks را از اجزای تابع React فراخوانی کنید. هوک ها را می توان از Hook های سفارشی نیز فراخوانی کرد.

نتیجه گیری

ما اکنون مفهوم اصلی ReactJs را یاد گرفته‌ایم که می‌توانیم انجام دهیم. اگر برای ساختن این نمونه ها الهام گرفته اید. به سلامتی!